chrome devtools の tips N連発

hr.icon

はじめに

本日はそこで培った知見を共有します

chrome devtools

皆さんご存知chromeについてるデバッグツール

便利な機能が沢山ある

DOMのデバッグをしたり、Network Requestの様子が見れたり、プロファイルが取れたり

使いこなせれば開発効率が大きく向上する

一方で、よく使われているのはほんの一部

もったいない

多くの機能は使いこなすのに事前知識はそこまでいらなくて、知っていればすぐ使える

沢山知っておけると便利

という訳で、いざという時に役立つ tips をひたすら紹介していきます

あんまりかっちりした話はしません

Elementタブ

Scroll into view

https://gyazo.com/fd1831e0ab4b9827df77374de0234495

Elementを右クリックして出てくるボタン

その要素がある位置にスクロールできる

この要素どこにあるんだっけ、という場面で便利

Force state

https://gyazo.com/44b0fa253a905bb6694e8d225cae26ed

hover状態やfocus状態を維持できる機能

hover状態のスタイルを調整したい時に便利

Store as global variables

https://gyazo.com/cfa37ae3a0447eae00fc9e6b872efcde

要素をグローバル変数に代入できる

Consoleから参照可能

Elementタブ (Toggle device toolbar)

https://gyazo.com/3a4f7dd02f89b93bf2c4e1636a3d8cd1

ここのボタンのこと

モバイルデバイスなどのエミュレートができる

Emulate device

https://gyazo.com/edb6184915fd702df14c3e6fca2f2799

画面サイズやUAを特定のモバイルデバイスに偽装してくれる

モバイルで見た時にどう見えるかを調査するのに便利

Capture screenshot

https://gyazo.com/722c2dd65de0a9859c5dc9a5fcc55e76

スクリーンショットを撮れる

拡張機能不要

ちなみに要素単位でも撮れます

https://gyazo.com/0f1cb111c206e0d3b5a60df2c9742443

DPR

https://gyazo.com/d16f480be7721931ea0d286645cf978a

Device Pixel Ratioのエミュレートができる

img要素のsrcset属性での画像出し分けのデバッグに便利

DPR 1 のデバイスではこの画像、2ではこの画像が出るというのを確認できる

Consoleタブ

Preserve logs

https://gyazo.com/2f019a00ff984a10d7f7d94634e2701b

遷移時にログを維持する機能

遷移直前に出力されるログがあるけど、すぐ消えてしまって見れない…という時に便利

Store XXX as global variables

https://gyazo.com/94aea4caf514f41696657bf1bdd51b05

Consoleに流れてきた値をグローバル変数に代入できる機能

ロガーが吐いた値を加工して見たい時に便利

Applicationタブ (Service Worker)

Update on reload

https://gyazo.com/7d4c69fea65551c10d1a37b85f69d2ce

ページリロードする度に最新のSWをインストール (更新) する機能

通常SWは24時間経過しないと更新されない

気づかずに古いSWを使い続けたまま開発してしまう

ONにしておくと毎回最新のSWが使われてトラブル防止になる

Bypass for network

SWのキャッシュを利用せず、毎回ネットワークからリソースをfetchする機能

SWのキャッシュが機能しているかの動作確認したい場面はそうそうないので、基本ONにするのがオススメ

余談: その他のキャッシュ無効化機能

Performanceタブ

CPU Throttling / Network Throttling

CPUやNetworkのパフォーマンスを意図的に制限できる

CPUのパフォーマンスを1/4、1/6に下げたり...

3G相当の回線速度に落とせたり

https://gyazo.com/249f2892eeb974a62821bb6c844e767b

CPU Throttingは多分内部でビジーループしてる

https://gyazo.com/7d74fb4bd0a4128d963494291884773d

モバイルデバイスにおけるパフォーマンスをシュミレーションする時に使う

モバイルのパフォーマンスを測定する時は実際のデバイスのスペックに近づけてから測定することが重要

素朴にプロファイルを取ると誤った分析をしたり、効果のない対策を打つことになる

注意点

throttling適用後のパフォーマンスはホストデバイス(devtoolsを動かしているデバイス)のスペックに依存する

同じ6x slowdownでもホストデバイスのスペックが高いほうが速くなる

厳密にスペックを合わせたい、という用途には全く向かない

Start profiling and reload page

https://gyazo.com/1ce5c34efa30e9128ff5701179be3002

ページをリロードしつつプロファイルを取ってくれる

リロードしてからページの読み込みが落ち着くまでを自動で計測してくれる

Web Vitalsも出してくれる

https://gyazo.com/b148432126fc5da1b3e47e33bbdf9815

左隣にもプロファイル取るボタンがあるが、こちらは手動で計測開始・終了のタイミングを制御したい時に使うもの

こちらはWeb Vitalsを出してくれない！

Web Vitalsを算出するにはページアクセス直後からの測定が必要なため

気をつけよう

Save profile / Load profile

生成したプロファイルをファイルに保存したり、保存したものを読み込んだりできる

また前回のプロファイルが見たくなった時に見れる

後は複数人でパフォーマンスを分析したい時に、誰か一人がプロファイルを取る => ファイルに保存 => ファイルを他の人に配る、みたいな感じで複数人で同じ分析結果を眺めるためにも使ってます

ただのJSONなので扱いやすい

よくGoogle Driveに置いてそのリンクをIssueに貼ってます

ScrapboxはD&Dするだけで良くて最高

Renderingタブ

https://gyazo.com/020d59598382203afca7d2372d12611f

分かりにくい！！！

Layout Shift Regions

https://gyazo.com/053c4a92635d44b2564d0fabfed95919

Layout Shiftを発生させている要素をハイライトしてくれる

ガタツキを調査するのに便利

Frame Rendering Stats

https://gyazo.com/a6a79a7897c1304354e5c5dd34beb97d

FPSを測定できる

パフォーマンスの低下により描画がスキップされたフレームが赤で表示される

CPU Throttlingと組み合わせるとモバイルでのFPSの落ち込みをシュミレーションできて便利

Animationsタブ

Set speed

https://gyazo.com/8b517d4d0c6127a2e7e2bb6ecfb0da79

CSSアニメーションの速度を遅くすることができる

アニメーションをゆっくり見たい時に便利

JSによるアニメーションは遅くできない

逆手に取ると...

JSとCSSどちらでアニメーションをしているのかを切り分けるのにも利用できる

その他

あの機能ONにしたいけどボタンどこにあったかな〜という時に使う

https://gyazo.com/bcb861be25d820b7ee589d0f9221719b

devtoolsの拡大縮小

複数人で画面共有しながらパフォーマンス分析するのに便利

おわり

この機能あの場面で使えそう、となってれば嬉しいです

質問何かあればどうぞ

想定質問: どうやってdevtoolsの便利機能探してますか

何が起こるか分からなくても、とりあえず押してみて様子を見ている

押すだけで面白機能が発動するので楽しいし、取っ掛かりやすい

その他だとChrome開発チームのリリースノートから情報を仕入れるとか

devtoolsの新機能だけをまとめた記事が存在する

丁寧な解説も付いている

新機能の使い方が分からなければここを見れば良い

昔からある機能の使い方を知りたければGoogle Developersから調べる

devtoolsの使い方をまとめたドキュメントがある

古い機能はだいたいここで解説されているはず

質問: イチオシの機能はなんですか

https://gyazo.com/bfd6d67ec8e0a73c65871b78296cae90

ゴミ箱アイコンを押すと強制的にGCを発動させられる

期間A-Bでメモリ使用量がどれくらい増えたかを調査する時に使う

ゴミ箱ボタン押す => トレース開始(A) => メモリの変化がある操作をする => ゴミ箱ボタン押す => トレース終了(B)

点A・BはGCが走った直後なので、ゴミがメモリ上に殆ど残っておらず、真のメモリ使用量を計測することができる

GC走らせないともう参照されていないゴミが使用量にカウントされて、使用量の比較が正確にできなくなる

合わせて読みたい